<template>
    <div>
        <div class="contact">
		<div class="container">
			<h3 class="agileits-title">个人资料</h3>
			<div class="contact-agileinfo">
                <!-- <div class="col-md-1"></div> -->
                <div class="col-md-12">
                            <el-form :label-position="labelPosition" label-width="100px">
                                <el-form-item label="UID：" style="width:50%">
                                    {{$store.state.UID}}
                                </el-form-item>
                                <el-form-item label="用户名：">
                                    <el-input :placeholder="$store.state.username" style="width:70%" v-model="$store.state.username"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱：">
                                    <el-input :placeholder="$store.state.email" v-model="$store.state.email" style="width:70%"></el-input>
                                </el-form-item>                           
                                <el-button type="primary" plain @click="update">更新资料</el-button>                            
                            </el-form>
                </div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            labelPosition:'right',
            tabPosition:'left',
        };
    },
    created(){
        
    },
    methods: {
        update(){
            if(this.$store.state.username != '' && this.$store.state.email != ''){
                let formdata = new FormData()
                formdata.append('uid', this.$store.state.UID)
                formdata.append('username', this.$store.state.username)
                formdata.append('email', this.$store.state.email)
                const path = 'http://10.138.120.46:5000/api/updateinfo'
                var config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
                    }
                };
                var that = this
                this.axios.post(path, formdata, config).then((response)=>{
                    if(response.data.info === 401){
                        that.$message({
                            type:'error',
                            message:'用户名已存在！'
                        })
                    }else{
                        that.$message({
                            type:'success',
                            message:'更新成功！'
                        })  		
                        localStorage.setItem('username', JSON.stringify(response.data.username))
                        localStorage.setItem('email', JSON.stringify(response.data.email))
                    }
                }).then((error=>{
                    alert(error)
                }))
            }else{
                    this.$message({
                        type:'error',
                        message:'用户名或邮箱不能为空！'
                    })
            }
        },
    },
    components:{
    }
};
</script>

<style scoped lang="scss">

</style>
